<template>
   <div class="container">
       <product-item v-for="i in 10" :key="i"></product-item>
       
   </div>
</template>

<script>
/*
  1、Vue项目是由是组件组成
  2、组件具有可复用性；组件具有可维护性；组件具有可扩展性
  3、组件按照作用范围分成全局组件和局部组件(私有组件)
  1）定义局部组件的步骤
    第1步.创建一个文件名后缀是vue的文件，在这个文件中包括三部分
     template:页面结构的
     script:组件的逻辑代码部分
     style:组件的样式
    第2步：引入组件：使用ES6的import导入语法将组件引入进来
    第3步：注册组件:在script代码中的components选项中进行注册
    第4步: 使用组件:在template部分使用<组件名></组件名>
    注意：在引入的时候可以使用驼峰式命名法进行引入，也可以使用短横线命名法进行引入
*/
import ProductItem from '@/components/ProductItem.vue'
export default {
    components:{
        ProductItem
    }
}
</script>

<style>
    .container{
        width: 2000px;
        display: flex;
        flex-wrap: wrap;
    }
</style>